<template>
  <div>
    <n-breadcrumb class="mb-5">
      <n-breadcrumb-item>
        <nuxt-link to="/">首页</nuxt-link>
      </n-breadcrumb-item>
      <n-breadcrumb-item>
        {{ getTitle }}
      </n-breadcrumb-item>
    </n-breadcrumb>

    <LoadingGroup :pending="pending" :error="error" :is-empty="rows.length === 0">
      <template #loading>
        <LoadingBookSkeleton v-if="type === 'book'" />
        <LoadingCourseSkeleton v-else />
      </template>

      <n-grid x-gap="12" :cols="type === 'book' ? 2 : 4 ">
        <n-gi v-for="(item, index) in rows" :key="index">
          <BookList v-if="type=== 'book'" :item="item"/>
          <CourseList v-else :item="item"/>
        </n-gi>
      </n-grid>

      <div class="flex justify-center items-center mt-5 mb-10">
        <n-pagination
            size="large"
            :page="page"
            :item-count="total"
            :page-size="limit"
            :on-update:page="handlePageChange"
        />
      </div>
    </LoadingGroup>
  </div>
</template>

<script setup>
// 引入CompositionAPI

// naive-ui
import {NGrid, NGi, NPagination, NBreadcrumb, NBreadcrumbItem} from "naive-ui";

// 路由实例
const route = useRoute();

// 获取路由信息
const {type} = route.params;

// 获取标题
const getTitle = route.meta.title;

// 导航栏列表
const tabs = [
  {
    label: "课堂",
    value: "course",
  },
  {
    label: "专栏",
    value: "column",
  },
];

const {
  page,
  limit,
  total,
  rows,
  handlePageChange,
  pending,
  error,
  refresh,
} = await usePage(({page, limit}) => {

  let query = {
    page
  }

  if(type === "group" || type === "flashsale"){
    query.usable = 1
  }

  return useListApi(type, query)
});


// 调用中间件
definePageMeta({
  middleware: ['list']
})
</script>
